<template>
  <RenderCom v-for="child in node.children" :node="child" :key="child.id"></RenderCom>
</template>
<script>
import { defineComponent, computed, watch } from 'vue';
import { useNodeTreeStore } from 'src/stores/nodeTree';
import defaultProps from '../../common/defaultProps';
import RenderCom from '../RenderCom/RenderCom.vue';
import { computedGroupLayout } from '../../common/utils';
export default defineComponent({
  name: 'GroupComponent',
  props: defaultProps,
  components: {
    RenderCom,
  },
  setup(props) {
    const nodeTreeStore = useNodeTreeStore();
    const treeNode = computed({
      get() {
        return nodeTreeStore.treeMap[props.node.id];
      },
      set(val) {
        nodeTreeStore.treeMap[props.node.id] = val;
      },
    });
    const layout = computed({
      get() {
        return nodeTreeStore.treeMap[props.node.id].layout;
      },
      set(val) {
        nodeTreeStore.treeMap[props.node.id].layout = val;
      },
    });
    let childrenStartLayout = [];
    let start = {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
    };
    watch(
      () => {
        return treeNode.value.children.length;
      },
      (val) => {
        if (val) {
          childrenStartLayout = treeNode.value.children.map((node) => {
            return { ...node.layout };
          });
          start = {
            x: layout.value.x,
            y: layout.value.y,
            width: layout.value.width,
            height: layout.value.height,
          };
        }
      },
      {
        immediate: true,
      },
    );
    watch(
      () => nodeTreeStore.moving,
      () => {
        if (!nodeTreeStore.moving) {
          if (
            nodeTreeStore.activeNode &&
            treeNode.value.children.some((child) => child.id === nodeTreeStore.activeNode.id)
          ) {
            treeNode.value.layout = computedGroupLayout(treeNode.value.children);
          }
          childrenStartLayout = treeNode.value.children.map((node) => {
            return { ...node.layout };
          });
          start = {
            x: layout.value.x,
            y: layout.value.y,
            width: layout.value.width,
            height: layout.value.height,
          };
        }
      },
    );
    watch(
      () => layout.value,
      () => {
        // if (!nodeTreeStore.moving) return;
        if (!childrenStartLayout.length) return;
        treeNode.value.children.forEach((node, i) => {
          // 计算子元素位置比例
          let childXRatio = (childrenStartLayout[i].x - start.x) / start.width;
          let childYRatio = (childrenStartLayout[i].y - start.y) / start.height;
          let childWidthRatio = childrenStartLayout[i].width / start.width;
          let childHeightRatio = childrenStartLayout[i].height / start.height;
          // 根据比例计算子元素位置
          let childXNew = Math.round(layout.value.x + childXRatio * layout.value.width);
          let childYNew = Math.round(layout.value.y + childYRatio * layout.value.height);
          let childWidthNew = Math.round(childWidthRatio * layout.value.width);
          let childHeightNew = Math.round(childHeightRatio * layout.value.height);
          // 更新子元素位置
          node.layout.x = childXNew;
          node.layout.y = childYNew;
          node.layout.width = childWidthNew;
          node.layout.height = childHeightNew;
        });
      },
      {
        deep: true,
      },
    );
    return {
      layout,
      nodeTreeStore,
    };
  },
});
</script>
<style scoped lang="scss"></style>
